<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>图文咨询</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<link href="../css/config.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
		<link href="../css/circle.css" rel="stylesheet" />
		<link href="../css/my.css" rel="stylesheet" />
		<script src="../js/jquery-2.1.3.min.js"></script>
		<script src="../js/jquery.wheelmenu.js"></script>
		<style>
			body {
				background: #efefef;
			}
			
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
				z-index: 100;
			}
			
			footer .mui-icon {
				color: #000;
			}
			
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
					transform: rotateZ(45deg);*/
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			
			footer .mui-icon {
				color: #000;
			}
			
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}
			
			.footer-center .input-sound {
				background-color: #eee;
			}
			
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
			
			.mui-table-view-cell.mui-checkbox input[type=checkbox],
			.mui-table-view-cell.mui-radio input[type=radio] {
				top: 8px!Important;
			}
			
			.mui-table-view-cell {
				padding: 11px 15px 11px 58px!important;
			}
			
			.mui-table-view-cell .time {
				float: right;
				font-size: 14px;
				color: #ccc;
			}
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
		</style>
		<script>
			$(document).ready(function() {
				$(".wheel-button").wheelmenu({
					trigger: "click",
					animation: "fly",
					animationSpeed: "fast"
				});
			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">王医生-图文资讯</h1>
			<a class="header-text" ontouchstart="window.location.replace('doctor-comment.html')">结束</a>
		</header>
		<div class="mui-content3 mui-fullscreen mui-scroll-wrapper" style="background:#efefef;">
			<div class="mui-scroll">
				<div class="chat-pop other-part">
					<img src="../img/example1.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span> 消息消息消息消息
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span> 消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<!--检验检查报告-->
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img"  />
					<div class="content">
						<span class="triangle"></span>
						<img src="../img/yx-img.jpg" data-preview-src="" data-preview-group="2"/>
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<!--评估报告,这里如果一次发送两个报告，要分成两条数据显示-->
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span>
						<a ontouchstart="openWindow('index-bqpg-detail.html','index-bqpg-detail.html')"><i class="fa fa-link"></i>评估报告(DAS28:2.5)</a>
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<!--用药管理-->
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span>
						阿司匹林&nbsp;1日3次
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<!--异常记录-->
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span>
						[发烧]2015年12月1日开始，持续3天<br/>
						[头痛]2015年12月1日开始，持续3天
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				
			</div>
			<!--旋转菜单-->
			<div href="#wheel3" class="wheel-button right">
				<span class="mui-icon mui-icon-plusempty"></span>
			</div>
			<ul id="wheel3" data-angle="right" class="wheel">
				<li class="item"><a href="#sendPGBG">评估报告</a></li>
				<li class="item"><a href="#sendDQYY">当前用药</a></li>
				<li class="item"><a href="#sendYCJL">异常记录</a></li>
				<li class="item"><a href="#sendJYJC">检验检查</a></li>
			</ul>
			<!--旋转菜单 end-->
		</div>
		<footer>
			<div class="footer-left">
				<i id="msg-image" class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id="msg-text" type="text" class="input-text"></textarea>
				<!--<button id="msg-sound" type="button" class="input-sound" style="display: none;">按住说话</button>-->
			</div>
			<!--<label for="" class="footer-right">
				<i id="msg-type" class="mui-icon mui-icon-mic"></i>
			</label>-->
		</footer>

		<!--发送评估报告-->
		<div id="sendPGBG" class="mui-popover replyPopover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
						<a class="mui-icon mui-icon-back mui-pull-left" href="#sendPGBG"></a>
						<h1 id="title" class="mui-title km-view-title">选择评估报告</h1>
						<a class="mui-pull-right header-text">发送</a>
					</header>
					<div class="mui-content3">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">DAS28:<font color="coral">2.5</font><span class="time">2015年12月1日&nbsp;11:50</span>
							</li>
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">DAS28:<font color="coral">2.5</font><span class="time">2015年12月1日&nbsp;11:50</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<!--发送当前用药-->
		<div id="sendDQYY" class="mui-popover replyPopover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
						<a class="mui-icon mui-icon-back mui-pull-left" href="#sendDQYY"></a>
						<h1 id="title" class="mui-title km-view-title">选择当前用药</h1>
						<a class="mui-pull-right header-text">发送</a>
					</header>
					<div class="mui-content3">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">阿司匹林<span class="time">1日3次</span>
							</li>
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">阿司匹林<span class="time">1日3次</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<!--发送异常记录-->
		<div id="sendYCJL" class="mui-popover replyPopover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
						<a class="mui-icon mui-icon-back mui-pull-left" href="#sendYCJL"></a>
						<h1 id="title" class="mui-title km-view-title">选择异常记录</h1>
						<a class="mui-pull-right header-text">发送</a>
					</header>
					<div class="mui-content3">
						<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">发烧
							</li>
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">头疼
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<!--发送检验检查报告-->
		<div id="sendJYJC" class="mui-popover replyPopover">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
						<a class="mui-icon mui-icon-back mui-pull-left" href="#sendJYJC"></a>
						<h1 id="title" class="mui-title km-view-title">选择检验检查报告</h1>
						<a class="mui-pull-right header-text">发送</a>
					</header>
					<div class="mui-content3 ">
						<ul class="mui-table-view jg-ul-checkbox-imgview" >
							<li><img src="../img/20110417123000-847485700.jpg" data-preview-src="" data-preview-group="1"/></li>
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">血液化验单<span class="time">2015年12月1日</span>
							</li>
							<li><img src="../img/yx-img.jpg" data-preview-src="" data-preview-group="1"/></li>
							<li class="mui-table-view-cell mui-checkbox mui-left">
								<input name="checkbox" type="checkbox">CT片<span class="time">2015年12月1日</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/Global.js"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script>
		mui.init({
			swipeBack: true,
			statusBarBackground: '#f7f7f7',
			statusBarStyle: 'UIStatusBarStyleDefault'
		});
		mui('.mui-scroll-wrapper').scroll();
		$("#wheel3 li a").on('touchstart', function() {
			$(".wheel-button").click();
		})
		mui.previewImage();
		
	</script>

</html>